<template>
    <div class="des-layout-pane" :style="style" v-show="visible">
        <slot></slot>
    </div>
</template>

<script>
export default {
    inject:['onAddPane','onDelPane','requestUpdate'],
    props:{
        size:[String,Number],
        min:[String,Number],
        max:[String,Number],
        visible:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return {
            style:{},
        }
    },
    watch:{
        visible(){
            this.$nextTick(()=>{
                this.requestUpdate();
            })
        }
    },
    updated(){
        // this.requestUpdate();
        // console.log('pane updated!!!!!!',this.$el.offsetWidth)
    },
    mounted(){
        this.onAddPane(this);
    },
    methods:{
        updateSize(style){
            this.style = style;
        }
    },
    beforeDestroy(){
        this.onDelPane(this)
    },
    destroyed(){
        
    }
}
</script>

<style lang="less" scoped>
    .des-layout-pane{
        // border:1px #ccc solid;
        // flex: 1;
    }
</style>